import { Form, Input, Button, message } from 'antd';
import { getCaptcha, updatePassword } from '@/services/api/user/user';
export default function UpdatePassword() {
  const [formData, setFormData] = useState<Record<any, string>>();
  const [btnType, setBtnType] = useState(0);
  const [time, setTime] = useState(60);
  const navagate = useNavigate();
  // 获取表单数据
  function changeHandle(values: any) {
    setFormData({ ...formData, ...values });
  }

  // 验证码输入框
  function switchCaptcha() {
    return (
      <Form.Item
        label="验证码"
        name="captcha"
        rules={[{ required: true, message: '请输入验证码!' }]}
      >
        <div className=" flex">
          <div>
            <Input />
          </div>
          <div className=" ml-2 ">{typeBtn()}</div>
        </div>
      </Form.Item>
    );
  }
  // 获取验证码
  async function sendCaptcha() {
    setTime(60);
    const email = formData?.email as string;
    const res = await getCaptcha({ to: email });
    if (res.code === 200) {
      getCaptchaAfter();
    }
  }
  // 验证码发送成功后修改按钮状态
  const getCaptchaAfter = useCallback(() => {
    setBtnType(1);
    const timer = setInterval(() => {
      setTime(time => {
        if (time === 0) {
          clearInterval(timer);
          setBtnType(0);
        }
        return time - 1;
      });
    }, 1000);
  }, []);
  // 切换验证码状态
  function typeBtn() {
    return btnType === 0 ? (
      <Button type="primary" onClick={sendCaptcha}>
        发送验证码
      </Button>
    ) : (
      <Button type="primary">已发送（{time}）</Button>
    );
  }
  // 提交表单
  async function onFinish(values: Record<any, string>) {
    if (values.password !== values.repassword) {
      message.error('两次密码不一致');
      return;
    }
    const res = await updatePassword(values);
    if (res.code === 200) {
      message.success('修改成功');
      navagate('/login');
    }
  }
  return (
    <div className=" relative w-screen h-screen bg-[url('src/assets/images/login_bg.jpg')]  ">
      <div className=" w-1/3 bg-slate-50 p-4 absolute top-[40%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
        <h1 className=" flex justify-center my-3">会议室预定系统</h1>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          onFinish={onFinish}
          colon={false}
          autoComplete="off"
          onValuesChange={changeHandle}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '请输入邮箱!' }]}>
            <Input />
          </Form.Item>
          {switchCaptcha()}
          <Form.Item
            label="新密码"
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="repassword"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item labelCol={{ span: 0 }} wrapperCol={{ span: 24 }}>
            <div className=" flex justify-center ">
              <Button className="w-full" type="primary" htmlType="submit">
                修改密码
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
